<template>
      <div>
        <div>
          <div>
            <el-button icon="el-icon-arrow-left" @click="addClick" circle></el-button>
            <el-form :inline="true" :model="formSearch" class="demo-form-inline">
              <el-form-item label="班级">
                <el-cascader
                    placeholder="请选择班级"
                    v-model="formSearch.classid"
                    :options="classTree"
                    @change="cascaderChange"></el-cascader>
              </el-form-item>
              <el-form-item label="课程">
                <el-select v-model="formSearch.courseid" placeholder="请选择课程">
                  <el-option
                      v-for="item in courseList"
                      :key="item.id"
                      :label="item.coursename"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="学期">
                <el-input type="number" v-model="formSearch.term_year" placeholder="请输入学期"></el-input>
              </el-form-item>
              <el-form-item label="周">
              <el-date-picker
                  placeholder="请选择第几周"
                  type="week"
                  v-model="weekScope.date_week"
                  value-format="yyyy-M-d"
                  :format="'第'+weekScope.week+'周'"
                  @change="weekChange">
              </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="searchClick">查询</el-button>
                <el-button type="danger" @click="clearClick">清空</el-button>
                <el-button type="success" @click="addFormVisible=true">添加时间表</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div>
          <el-table
              :data="tableData"
              stripe
              border
              style="width: 100%">
            <el-table-column
                prop="ids"
                sortable
                label="ID"
                width="80px">
            </el-table-column>
            <el-table-column
                sortable
                label="班级">
            <template slot-scope="scope">
              {{scope.row.grade}}级{{scope.row.classname}}{{scope.row.hover}}班
            </template>
            </el-table-column>
            <el-table-column
                prop="coursename"
                sortable
                label="课程">
              <template slot-scope="scope">
               <el-tag>{{scope.row.coursename}}</el-tag>
              </template>

            </el-table-column>
            <el-table-column
                prop="term_year"
                sortable
                label="学期"
                width="80px">
              <template slot-scope="scope">
                <el-tag type="warning">第{{scope.row.term_year}}学期</el-tag>
              </template>

            </el-table-column>
            <el-table-column
                prop="period_num"
                sortable
                label="学时"
                width="80px">
            </el-table-column>
            <el-table-column
                prop="start_week"
                sortable
                label="开始周"
                width="100px">
            </el-table-column>
            <el-table-column
                prop="end_week"
                sortable
                label="结束周"
                width="100px">
            </el-table-column>
            <el-table-column
                sortable
                label="课程安排">
              <template slot-scope="scope">
                <div class="sc-info-wrap">
                  <div v-for="(item,index) in scope.row.info">
                    <el-link type="primary">周{{item.week}}</el-link> <span class="line"></span>
                    <el-link type="success">第{{item.pitch}}节</el-link> <span class="line"></span>
                    <el-link type="warning">{{item.room}}</el-link>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
            >
              <template slot-scope="scope"  v-if="($store.state.user&&$store.state.user.admin_grade>1)">
                <el-button type="primary" plain @click="updateClick(scope.row)">编辑</el-button>
                <el-button type="danger" plain @click="deleteClick(scope.row.ids)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              layout="prev, pager, next"
              :page-size="10"
              :current-page="pagenum"
              @current-change="pageChange"
              :total="total">
          </el-pagination>
        </div>

        <!--      编辑-->
        <el-dialog title="编辑班级"   :visible.sync="dialogFormVisible">
          <el-form :model="updateForm" label-position="right" ref="upForm" label-width="80px">
            <el-form-item label="课程名" prop="classid">
              <el-cascader
                  disabled
                  placeholder="请选择班级"
                  v-model="updateForm.classid"
                  :options="classTree"
                  ></el-cascader>
            </el-form-item>
            <el-form-item label="课程名" prop="courseid">
              <el-select disabled v-model="updateForm.courseid" placeholder="请选择课程">
                <el-option
                    v-for="item in courseList"
                    :key="item.id"
                    :label="item.coursename"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="学期" prop="term_year">
              <el-input type="number"  v-model="updateForm.term_year" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="开始周" prop="start_week">
              <el-input type="number"  v-model="updateForm.start_week" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="结束周" prop="end_week">
              <el-input type="number" v-model="updateForm.end_week" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="上课安排">
              <TakeCard ref="takecard" :checkboxs="checkboxs" :selects="selects" :classfroms="classfroms"></TakeCard>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateScEvent">确 定</el-button>
          </div>
        </el-dialog>

<!--      添加-->
        <el-dialog title="编辑班级"   :visible.sync="addFormVisible">
          <el-form :model="addForm" label-position="right" ref="addForm" label-width="80px">
            <el-form-item label="课程名" prop="classid">
              <el-cascader
                  placeholder="请选择班级"
                  v-model="addForm.classid"
                  :options="classTree"
                  @change="cascaderaddFormChange"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="课程名" prop="courseid">
              <el-select v-model="addForm.courseid" placeholder="请选择课程">
                <el-option
                    v-for="item in courseList"
                    :key="item.id"
                    :label="item.coursename"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="学期" prop="term_year">
              <el-input type="number"  v-model="addForm.term_year" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="开始周" prop="start_week">
              <el-input type="number"  v-model="addForm.start_week" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="结束周" prop="end_week">
              <el-input type="number" v-model="addForm.end_week" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="上课安排">
              <TakeCard ref="takecard" :checkboxs="checkboxs" :selects="selects" :classfroms="classfroms"></TakeCard>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="addFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addScEvent">确 定</el-button>
          </div>
        </el-dialog>
      </div>
</template>

<script>
import {editSc, getClass, addSc,getCourseAll, deleSc,getSc, getSchoolDate} from '@/request'
import {groupBykey,TodayInfo} from '@/tools/utils'
import TakeCard from "@/components/TakeCard";
export default {
  name: "Sc",
  data(){
    return {
      tableData:[],
      total:0,
      pagenum:1,
      weekScope:{
        value:null,
        week:0
      },
      formSearch:{
        classid:null,
        courseid:null,
        term_year:null,
        date_week:null,
      },
      classTree:[],
      courseList:[],
      shoolStart:null,
      dialogFormVisible:false,
      addFormVisible:false,
      updateForm:{},
      cityOptions:['1','2', '3', '4', '5', '6', '7'],
      checkboxs:[[],[],[],[],[],[],[]],
      selects:[],
      classfroms:[[],[],[],[],[],[],[]],
      addForm:{
        classid:null,
        courseid:null,
        term_year:null,
        start_week:null,
        end_week:null,
      }
    }
  },
  components:{
    TakeCard
  },
  created() {
    this.getsc();
    this.getclassTree();
    this.getcourse();
    this.getschoolDate();
  },
  methods:{
    async addScEvent(){
      let takecard=this.$refs.takecard;
      let week=takecard.select
      let checkboxGroup=takecard.checkboxGroup
      let classfromGroup=takecard.classfromGroup

      let week_day=[]
      let pitch_num=[]
      let classroom=[]
      for(let index of week){
        pitch_num=[...pitch_num,...checkboxGroup[index]] //这周对应节数
        classroom=[...classroom,...classfromGroup[index]]//这周对应教室
        week_day=[...week_day,...Array(checkboxGroup[index].length).fill(index+1)];
      }
      this.addForm['pitch_num']=pitch_num;
      this.addForm['class_room']=classroom;
      this.addForm['week_day']=week_day
      let data=await addSc(this.addForm);
      if(data.code!=200)return this.$message.error(data.message);
      this.addFormVisible=false;
      this.getsc();
    },
    async updateScEvent(){
      let takecard=this.$refs.takecard;
      let week=takecard.select
      let checkboxGroup=takecard.checkboxGroup
      let classfromGroup=takecard.classfromGroup

      let week_day=[]
      let pitch_num=[]
      let classroom=[]
      for(let index of week){
        pitch_num=[...pitch_num,...checkboxGroup[index]] //这周对应节数
        classroom=[...classroom,...classfromGroup[index]]//这周对应教室
        week_day=[...week_day,...Array(checkboxGroup[index].length).fill(index+1)];
      }
      this.updateForm['pitch_num']=pitch_num;
      this.updateForm['class_room']=classroom;
      this.updateForm['week_day']=week_day
      let data=await editSc(this.updateForm);
      if(data.code!=200)return this.$message.error(data.message);
      this.dialogFormVisible=false;
      this.getsc();
    },
    updateClick(item){
      this.dialogFormVisible=true;
      console.log(item)
      this.updateForm={
        classid:item.classid,
        courseid:item.courseid,
        term_year:item.term_year,
        start_week:item.start_week,
        end_week:item.end_week,
        pitch_num:item.pitch_num,
        week_day:item.week_day,
        class_room:item.class_room,
        id:item.ids,
      };
      this.init(item.week_day,item.pitch_num,item.class_room);
    },
    init(weekday,pitchnum,classroom){
      weekday=JSON.parse(weekday)
      pitchnum=JSON.parse(pitchnum)
      classroom=JSON.parse(classroom)
      let checkboxs=[[],[],[],[],[],[],[]]
      let classfroms=[[],[],[],[],[],[],[]]
      let selects=[]

      weekday&&weekday.forEach((item,index)=>{
        let index2=item-1;//
        checkboxs[index2]=[...checkboxs[index2],pitchnum[index]];
        classfroms[index2]=[...classfroms[index2],classroom[index]];
        if(selects.indexOf(item-1)==-1)selects.push(item-1) //不存在则存入
      })

      this.checkboxs=checkboxs;
      this.selects=selects;
      this.classfroms=classfroms;
    },
    async getschoolDate(){
      let data=await getSchoolDate();
      if(data.code!=200)return this.$message.error(data.message);
      this.shoolStart=data.data;
    },
    async weekChange(val){
      if (val) {
        let res=TodayInfo(this.shoolStart,val);
        this.weekScope.week = res.week;
        this.formSearch.date_week=res.week;
      }
    },
    cascaderChange(val){
      this.formSearch.classid=val&&val[1]
    },
    cascaderaddFormChange(val){
      this.addForm.classid=val&&val[1]
    },
    async getcourse(){
      let data=await getCourseAll();
      if(data.code!=200)return this.$message.error(data.message);
      this.courseList=data.data;
    },
    searchClick(){
      this.getsc()
    },
    addClick(){
      this.$router.push("/klasa/addsc");
    },
    clearClick(){
      this.formSearch={
            classid:null,
            courseid:null,
            term_year:null,
            date_week:null
      }
      this.weekScope={
        value:null,
        week:0
      }
      this.getsc();
    },
    async getclassTree(){
      let data=await getClass();
      if(data.code!=200)return this.$message.error(data.message);
      let arr=groupBykey(data.data,'grade');
      this.classTree=arr;
    },
    pageChange(val){
      this.pagenum=val
      this.getsc();
    },
    async getsc(){
      this.formSearch['pagenum']=this.pagenum;
      let data=await getSc(this.formSearch);
      if(data.code!=200)return this.$message.error(data.message);
      let datas=data.data.list;
      datas.map((item,index)=>{
        let week_day=JSON.parse(item.week_day);
        let pitch_num=JSON.parse(item.pitch_num);
        let class_room=JSON.parse(item.class_room);

        item['info']=[];
        week_day.forEach((item2,index2)=>{
          item['info'].push({week:item2,pitch:pitch_num[index2],room:class_room[index2]})
        })
      })
      this.tableData=datas;
      this.total=data.data.total;
    },
    deleteClick(id){
      console.log(id)
      this.$confirm('您将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let data=await deleSc({ids:[id]});
        if(data.code!=200)return this.$message.error(data.message);
        this.$message.success('删除成功!');
        this.getsc();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  }
}
</script>

<style scoped>
  .sc-info-wrap .line{
    margin: 0px 3px;
  }
</style>